<template>
	<view class="content">
		<view class="title">菜谱名单</view>
		<view class="tips">请为菜谱进行投票, 感谢您的支持</view>
		<uni-search-bar @confirm="search" @input="input" v-model="searchName" cancelButton="none" placeholder="输入菜谱名称进行搜索"></uni-search-bar>
		
		<view class="group-btn">
			<view class="blue">全部</view>
			<view>荤菜</view>
			<view>素菜</view>
		</view>
		
		<view class="list">
			<view class="list-con">
				<view class="list-title">酸辣土豆丝</view>
				<image class="list-img" src="../../static/images/tudousi.jpg"></image>
				<view class="list-info">酸辣土豆丝，是用土豆、辣椒、白醋，葱等制作而成的菜肴，色泽光亮，酸辣可口。</view>
				
				<view class="list-vote" style="display: flex; background-color: #fff; justify-content: space-between;">
					<view>总排名:1</view>
					<view>总票数:150</view>
					<view class="blue">
						<uni-icons type="hand-thumbsup" size="15" color="#fff" style="margin-right: 10rpx;"></uni-icons>
						投票
					</view>
				</view>
				<view class="comments">
					<view>好吃, 希望明天还有</view>
					<view>味道不错</view>
					<view>量很大, 够吃</view>
					<view style="color: #007AFF;">+添加评论</view>
				</view>
			</view>
			
			<view class="list-con">
				<view class="list-title">溜肉段</view>
				<image class="list-img" src="../../static/images/liurouduan.jpg"></image>
				<view class="list-info">溜肉段，是东北地区的传统名菜，具有外酥里嫩，味香可口的特点。成品外酥里嫩、咸香可口，百姓饭桌上的家常菜。由溜肉段衍生出的锅包肉更是东北菜中的经典。</view>
				
				<view class="list-vote" style="display: flex; background-color: #fff; justify-content: space-between;">
					<view>总排名:2</view>
					<view>总票数:100</view>
					<view class="blue">
						<uni-icons type="hand-thumbsup" size="15" color="#fff" style="margin-right: 10rpx;"></uni-icons>
						投票
					</view>
				</view>
				<view class="comments">
					<view style="color: #007AFF;">+添加评论</view>
				</view>
			</view>
			
			<view class="list-con">
				<view class="list-title">溜肉段</view>
				<image class="list-img" src="../../static/images/liurouduan.jpg"></image>
				<view class="list-info">溜肉段，是东北地区的传统名菜，具有外酥里嫩，味香可口的特点。成品外酥里嫩、咸香可口，百姓饭桌上的家常菜。由溜肉段衍生出的锅包肉更是东北菜中的经典。</view>
				
				<view class="list-vote" style="display: flex; background-color: #fff; justify-content: space-between;">
					<view>总排名:2</view>
					<view>总票数:100</view>
					<view class="blue">
						<uni-icons type="hand-thumbsup" size="15" color="#fff" style="margin-right: 10rpx;"></uni-icons>
						投票
					</view>
				</view>
				<view class="comments">
					<view style="color: #007AFF;">+添加评论</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				searchName:''
			}
		},
		onLoad() {

		},
		methods: {
			input(){
				
			},
			search(){
				
			}
		}
	}
</script>

<style>
	.comments{
		font-size: 25rpx;
	}
	//菜谱列表
	.list{
		margin-top: 50rpx;
		text-align: center;
	}
	.list-con{
		background-color: #f8f8f8;
		padding: 30rpx 0 10rpx 0;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}
	.list-con view{
		margin: 20rpx;
	}
	.list-title{
		font-size: 35rpx;
		font-weight: bold;
	}
	.list-info{
		text-align: left;
	}
	.list-vote{
	}
	.list-vote view{
		padding: 8rpx 25rpx;
	}
	
	.content {
		padding: 30rpx;
		color: #333;
	}
	
	.title {
		font-size: 40rpx;
		padding: 30rpx;
		font-weight: bold;
		text-align: center;
	}
	.tips{
		margin-bottom: 50rpx;
		text-align: center;
		font-size: 35rpx;
		color: #666;
	}
	.group-btn{
		display: flex; 
		justify-content:flex-start;
		font-size: 30rpx;
	}
	.group-btn view{
		padding: 8rpx 25rpx;
		border-radius: 4rpx;
		margin-top: 50rpx;
	}
	.blue{
		background-color: #007AFF;
		color: #fff;
		border-radius: 4rpx;
	}
	.uni-searchbar[data-v-180dbe05]{
		padding: 0;
	}
	.uni-button{
		margin-right: 0 !important;
	}
	uni-button{
		margin-right: 0 !important;
	}
</style>
